<template>
  <h1>日期时间选择组件</h1>
  <el-date-picker
      type="date"
      v-model="rq"
      @change="console.log(rq);"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      placeholder="请选择日期"
  ></el-date-picker>
  <el-date-picker
      type="datetime"
      v-model="sj"
      @change="console.log(sj);"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      placeholder="请选择下单时间"
  ></el-date-picker>
  <hr>
  <el-date-picker
    type="datetimerange"
    v-model="times"
    @change="f"
    format="YYYY-MM-DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    range-separator="至"
  ></el-date-picker>
</template>

<script setup>
import {ref} from "vue";

//定义变量用来保存用户选择日期
const rq = ref('');
//定义变量用来保存用户选择时间
const sj = ref('');
//定义数组来保存起止时间
const times = ref([])
//定义方法输出选择好的时间
const f =()=>{
  console.log(times.value)
  console.log("开始时间："+times.value[0])
  console.log("结束时间："+times.value[1])
}
</script>

<style scoped>

</style>